<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="" /> 
<meta name="description" content="" />
<title>店铺趋势</title>
<link type="text/css" href="../css/reset.css" rel="stylesheet" />
<link type="text/css" href="../css/public.css" rel="stylesheet" />
<link type="text/css" href="../css/style.css" rel="stylesheet" />
<link type="text/css" href="../css/wode.css" rel="stylesheet" />
<script>
    var deviceWidth = Math.min(640, window.innerWidth)
    document.documentElement.style.fontSize = deviceWidth / 7.5 + "px"
</script>
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/core.js"></script>
<script src="../js/27.2.0shujudianpuqushi.js"></script>

</head>

<body>
<!-- top -->
<div class="header">
    <header class="p_header public-red">
        <a href="javascript:history.go(-1);" class="p_header_left">
            <i class="p_left" title="返回"></i>
        </a>
        <h1 class="p_dizhi">店铺趋势</h1>
    </header>
</div>
<!--店铺趋势-->
<div class="qushi_tu">
	<ul class="qushi_tu_time clearfix">
		<li class="qushi_tu_curr" onclick="chaxun(7)">最近7天</li>
		<li onclick="chaxun(15)">最近15天</li>
		<li onclick="chaxun(30)">最近30天</li>
		<li onclick="chaxun(60)">最近60天</li>
	</ul>
	<div>
		<div id="main" style="width:100%; height:150px; margin-top:10px;"></div>
	</div>
</div>


<div class="qushi_fenlei">
	<ul class="clearfix">
		<li class="qushi_tu_curr"  onclick="dianjis(this)" id="1">
			<h5 id="fangkeshu">0</h5>
			<h6>访客率</h6>
		</li>
		<li onclick="dianjis(this)" id="2">
			<h5 id="liulanlaing">0</h5>
			<h6>浏览量</h6>
		</li>
		<li  onclick="dianjis(this)" id="3">
			<h5 id="selectOrderMoney">0</h5>
			<h6>交易金额</h6>
		</li>
		<li  onclick="dianjis(this)" id="4">
			<h5 id="percentOfConversion">0</h5>
			<h6>转化率</h6>
		</li>
		<li  onclick="dianjis(this)" id="5">
			<h5 id="selectPayBullInfoCount">0</h5>
			<h6>支付买家数</h6>
		</li>
		<li onclick="dianjis(this)" id="6">
			<h5 id="customerOrderCount">0</h5>
			<h6>客单数</h6>
		</li>
	</ul>
</div>

<div class="public-jianxi"></div>

<div class="qushi_time">
	
</div>

<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script type="text/javascript">
$(function () {
	//切换
   	$('.qushi_tu_time li').on('click',function(){
        //给菜单添加选择样式
        $(this).addClass('qushi_tu_curr').siblings().removeClass('qushi_tu_curr');
   	});
   
   //切换
   	$('.qushi_fenlei li').on('click',function(){
        //给菜单添加选择样式
        $(this).addClass('qushi_curr').siblings().removeClass('qushi_curr');
   
   	});
   
});
</script>
  <script>
  	  //查询七天的数据
  	  
  	    function  chaxun(day){
     	$.ajax({   
            url: urlcore + "/api/visit/shopTrend?day="+day+"&userId="+uuuuid,
			type: "get",
			dataType: 'json',
			contentType: "application/json;charset=utf-8",
			success: function(data) {
				if(data.success == true) {
					   // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
		show: false,
        data:['不适用','符合标准','适当改善','潜在风险']
    },
color:['#fff'], 
    grid: {
        left: '3%',
        right: '5%',
        bottom: '0%',
		top:'4%',
        containLabel: true
    },

    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
  
    xAxis: {
		splitLine:{show: false},
        boundaryGap: false,
        data: data.data.listDate,
		axisLabel: {
        show: true,
        textStyle: {
         color: '#fff'
        }
        },
		axisTick: {
        show: true,
        lineStyle:{
         color:'#fff',
        }
    },
       axisLine:{
       lineStyle:{
       color:'#fff',
        }
		}
    },
    yAxis: {
		splitLine:{show: false},
        type: 'value',
		axisLabel: {
        show: true,
        textStyle: {
        color: '#fff'
         }
        },
		axisTick: {
        show: true,
       lineStyle:{
       color:'#fff',
       }
    },
    axisLine:{
    lineStyle:{
    color:'#fff',
    }
	}
    },
    series: [
        {
            name:'不适用',
            type:'line',
            stack: '总量',
            data:data.data.list,
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
				}
			},
			error: function() {
				alert("error");
			}
		});

  	    }
  	    
  	
  </script>



</body>
</html>